<template>
  <div class="adivice-info">
    <div class="search-content">
      <Col class="panel content-header" :span="24">
        <div class="title-bar cf">
          <h5 class="fl">
            <span>
              <a href="javascript:void(0);" class="link" @click="backToCompany">
                <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a
              >
              <span class="dashboard-card-sep">|</span>
              <span class="dashboard-card-name"><span>设备详情</span></span>
            </span>
          </h5>
          <Breadcrumb>
            <BreadcrumbItem to="/device">设备管理</BreadcrumbItem>
            <BreadcrumbItem>设备详情</BreadcrumbItem>
          </Breadcrumb>
        </div>
      </Col>
    </div>
    <!-- 标签页 -->
    <Col class="panel tab-panel adevice-tab-panel" :span="24">
      <Tabs
        style="height: 100%;"
        :animated="false"
        :value="tabCurrentName"
        @on-click="tabBeClick"
      >
        <TabPane
          label="设备信息"
          name="first"
          style="height:100%;"
          v-if="!isxuni"
        >
          <BaseInfor :row="selectRow" v-if="tabCurrentName === 'first'" />
        </TabPane>
        <TabPane label="实时数据" name="second" style="height:100%;">
          <OnTimeData :row="selectRow" v-if="tabCurrentName === 'second'" />
        </TabPane>
        <TabPane label="采集参数" name="third" v-if="!isxuni">
          <GatherParam :row="selectRow" v-if="tabCurrentName === 'third'" />
        </TabPane>
        <TabPane label="报警设置" name="forth" v-if="!isxuni">
          <AlertSetting :row="selectRow" v-if="tabCurrentName === 'forth'" />
        </TabPane>
        <TabPane label="能效阈值" name="fifth" v-if="showDom || !isxuni">
          <EnergyEffect :row="selectRow" v-if="tabCurrentName === 'fifth'" />
        </TabPane>
      </Tabs>
    </Col>
  </div>
</template>

<script>
import BaseInfor from "./BaseInfor";
import OnTimeData from "./OnTimeData";
import GatherParam from "./GatherParam";
import AlertSetting from "./AlertSetting";
import EnergyEffect from "./EnergyEffect";
import { getDeviceDetail, getDeviceType, getDeviceTypeSeries } from "@/api";
export default {
  components: {
    BaseInfor,
    OnTimeData,
    GatherParam,
    AlertSetting,
    EnergyEffect
  },

  mounted() {
    this.getInitialState();
  },
  data() {
    return {
      selectRow: {},
      tabCurrentName: "first",
      showDom: false,
      isxuni: false
    };
  },
  methods: {
    getInitialState() {
      const params = this.$route.params;
      getDeviceDetail(params.id).then(res => {
        if (res.code === 200) {
          this.selectRow = res.data;
          if ("masterId" in res.data && !res.data.masterId) {
            this.isxuni = false;
          } else {
            this.tabCurrentName = "second";
            this.isxuni = true;
          }
          this.whatTypeDevice().then(() => {});
        }
      });
    },
    tabBeClick(name) {
      this.tabCurrentName = name;
    },

    whatTypeDevice() {
      return new Promise((resolve, reject) => {
        getDeviceType().then(res => {
          if (res.code === 200) {
            const deviceType = this.selectRow.deviceType;
            const result = res.data.find(t => t.id === deviceType);
            if (result) {
              getDeviceTypeSeries().then(res => {
                const deviceType = res.data.find(t => t.id === result.seriesId);
                const { name } = deviceType;

                if (name && name.indexOf("4路117") > -1) {
                  this.showDom = false;
                } else if (name && name.indexOf("8路117") > -1) {
                  this.showDom = false;
                } else {
                  this.showDom = true;
                }
                resolve();
              });
            }
          }
        });
      });
    },

    backToCompany() {
      let that = this;
      that.$router.push({
        path: "/device"
      });
    }
  }
};
</script>
